<template>
  <view class="home">
    <block v-if="data.brokerInfo.status == 0 || data.brokerInfo.status == 1">
      <view class="broker-box">
        <image src="@/static/images/04_3ng.png" mode=""></image>
        <block v-if="data.brokerInfo.status == 0">
          <view>已提交认证信息</view>
          <view>等待平台工作人员审核</view>
        </block>
        <view v-else>认证信息已通过</view>
        <view class="broker-btn" @click="handleBack">返回</view>
      </view>
    </block>
    <block v-else-if="data.brokerInfo.status == 2">
      <view class="broker-box">
        <image src="@/static/images/04_4nggong.png" mode=""></image>
        <view>认证失败</view>
        <u-text :text="`驳回原因：${data.brokerInfo.reason}`" color="#666" size="14" align="center"
          margin="32rpx 0 0 0"></u-text>
        <view class="broker-btn" @click="data.brokerInfo.status = 3">重新提交</view>
      </view>
    </block>
    <block v-else>
      <up-cell-group :border="false">
        <up-cell title="认证身份" value="经纪人认证"></up-cell>
      </up-cell-group>
      <form-item :form-json="formJson">
        <template #action="{form}">
          <view class="action-bar">
            <view class="u-flex-y-center u-m-b-20">
              <image src="@/static/images/01_18efd.png" @click="data.checked = !data.checked" class="login-img"
                v-if="!data.checked" mode="">
              </image>
              <image src="@/static/images/01_18mj.png" @click="data.checked = !data.checked" class="login-img" v-else
                mode="">
              </image>
              <view class="u-text-center login-text">
                <text>阅读并同意</text>
                <text @click="$u.route('/pages/index/agreement?type=3')"> 《用户协议》</text>
                <text @click="$u.route('/pages/index/agreement?type=4')">《隐私政策》</text>
              </view>
            </view>
            <up-button type="warning" shape="circle" color="#F87610" @click="_createBroker(form)">提交认证</up-button>
          </view>
        </template>
      </form-item>
      <back-page></back-page>
    </block>
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import formItem from '@/components/form-item/form-item.vue';
  import { brokerInfo, createBroker } from '../../config/api';
  const data = ref({
    checked: false,
    brokerInfo: {}
  })
  const formJson = ref([{
    label: '姓名',
    key: 'real_name',
    type: 'text',
    border: true,
    placeholder: '请输入联系人'
  }, {
    label: '手机号码',
    key: 'phone',
    type: 'text',
    border: true,
    placeholder: '请输入联系人',
    maxlength: 11
  }, {
    label: '身份证号码',
    key: 'id_card',
    type: 'text',
    border: true,
    placeholder: '请输入身份证号',
    maxlength: 18
  }, {
    label: '性别',
    key: 'sex',
    type: 'radio',
    border: true,
    placeholder: '请输入'
  }, {
    label: '所在地址',
    key: 'address',
    type: 'text',
    placeholder: "请选择",
    border: true,
  }])
  onMounted(() => {
    _brokerInfo()
  })
  // 经纪人信息
  const _brokerInfo = () => {
    brokerInfo().then(res => {
      console.log(res)
      data.value.brokerInfo = res.data
    })
  }
  // 经纪人认证
  const _createBroker = (row) => {
    if (!data.value.checked) {
      uni.$u.toast('请阅读并同意协议')
      return
    }
    createBroker(row).then(res => {
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
  const handleBack = () => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
  .home {
    min-height: 100vh;
    background: #fff;
    padding: 0 24rpx;

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 35rpx 0;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto;
      right: -12rpx;
    }

    ::v-deep .u-cell__body {
      padding: 35rpx 0;
    }
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }

    .login-text {
      font-size: 24rpx;

      text+text {
        color: #F87610;
      }
    }
  }

  .broker-box {
    padding-top: 66rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;

    image {
      width: 356rpx;
      height: 368rpx;
      margin-bottom: 66rpx;
    }

    .broker-btn {
      width: 320rpx;
      height: 78rpx;
      background: #F87610;
      border-radius: 44rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #fff;
      line-height: 78rpx;
      margin: 80rpx auto;
    }
  }
</style>